<template>
  <ScrollContainer class="pr-4" v-loading="loading" :loading-tip="t('common.loadingText')">
    <div class="flex justify-center w-full text-xl font-bold mb-1 pt-2">
      {{ flowProcessData.flowTitle }}
    </div>
    <div class="flex justify-center w-full mb-2"
      >流程号：{{ curFlowId }} &nbsp;&nbsp;发起人：{{
        flowProcessData.starter
      }}
      &nbsp;&nbsp;状态：{{ flowProcessData.flowStatusDesc }}
    </div>
    <div class="text-center">
      <span class="mr-2">更改流程状态: </span>
      <Select style="width: 160px" :options="statusList" v-model:value="dataRef.flowStatus" />
      <a-button type="primary" class="ml-2" @click="handleChangeFlowStatus">确定</a-button>
      <a-button type="primary" class="ml-2" @click="handleEdit">编辑</a-button>
    </div>
    <ProcessingProcessTable
      :typeCode="flowProcessData.flowTypeCode"
      :aryMyAction="dataRef.aryMyAction"
      :curFlowId="curFlowId"
      @reload-success="getRefreshPage"
    />
    <NodeTable :flowId="curFlowId" @node-table-success="getRefreshPage" />
    <Modal v-model:visible="flowStatusVisible" title="提示">
      <div style="text-align: center; padding: 20px 0">需要调用结束事件么？</div>
      <template #footer>
        <a-button type="primary" @click="handleOk(true)">是</a-button>
        <a-button type="primary" @click="handleOk(false)">否</a-button>
        <a-button @click="flowStatusVisible = false">取消</a-button>
      </template>
    </Modal>
    <!-- <Card title="调用事件" :headStyle="{ textAlign: 'center' }">
      <div class="flex justify-center">
        <Select style="width: 160px" :options="statusList" v-model:value="dataRef.status" />
        <div class="ml-2">
          <Select style="width: 160px" :options="eventList" v-model:value="dataRef.event" />
        </div>
        <a-button type="primary" class="ml-2">确定</a-button>
      </div>
    </Card> -->
  </ScrollContainer>
</template>
<script lang="ts" setup>
  import { ref, unref, h, onMounted } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  import { ScrollContainer } from '/@/components/Container';
  import { Card, Select, Modal } from 'ant-design-vue';
  import ProcessingProcessTable from './modules/ProcessingProcessTable.vue';
  import NodeTable from './modules/NodeTable.vue';
  import { statusList, eventList } from './interventionProcess.data';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getFlowChangeStatus } from '/@/api/flowManage/flowManage';
  import { useGo } from '/@/hooks/web/usePage';
  const go = useGo();
  import { useTabs } from '/@/hooks/web/useTabs';
  const { refreshPage } = useTabs();
  import { useRoute, useRouter } from 'vue-router';
  const emits = defineEmits(['success']);
  const props = defineProps({
    flowProcessData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    curFlowId: {
      type: [String, Number],
      default: '',
    },
    activeKey: {
      type: [String],
      required: false,
    },
  });
  const loading = ref(false);
  const flowStatusVisible = ref(false);
  onMounted(() => {
    fetch();
  });
  const dataRef = ref<Recordable>({
    status: '',
  });
  const fetch = () => {
    dataRef.value = Object.assign({}, props.flowProcessData);
    console.log('dataRef.value', dataRef.value);
  };

  const { createMessage, createConfirm } = useMessage();
  const handleChangeFlowStatus = () => {
    if (unref(dataRef).flowStatus == 2) {
      flowStatusVisible.value = true;
      // createConfirm({
      //   iconType: 'warning',
      //   title: () => h('span', t('common.prompt')),
      //   content: () => h('span', '需要调用结束事件么'),
      //   onOk: async () => {
      //     getFlowChangeStatusData();
      //   },
      // });
    } else {
      getFlowChangeStatusData(true);
    }
  };

  const handleOk = (bool) => {
    try {
      flowStatusVisible.value = false;
      if (bool) {
        getFlowChangeStatusData(true);
      } else {
        getFlowChangeStatusData(false);
      }
    } catch (error) {}
  };

  const getFlowChangeStatusData = async (isCallEvent = true) => {
    try {
      const params = {
        flowId: unref(dataRef).flowId,
        status: unref(dataRef).flowStatus,
        isCallEvent: isCallEvent,
      };
      loading.value = true;
      await getFlowChangeStatus(params);
      createMessage.success('操作成功');
      // getRefreshPage();
    } catch (err) {
      console.log(err);
    } finally {
      loading.value = false;
    }
  };

  const getRefreshPage = () => {
    // refreshPage();
    emits('success');
  };

  const { currentRoute } = useRouter();
  //编辑
  const handleEdit = () => {
    let tabTitle = props.flowProcessData['flowTitle'] || currentRoute.value.meta.title;
    go({
      path: '/smartModuleAddEditView',
      query: {
        isTab: true,
        isUpdate: 2,
        parentPath: unref(currentRoute).path,
        moduleCode: props.flowProcessData.formCode,
        id: props.flowProcessData['fdaoId'],
        formCode: props.flowProcessData.formCode,
        treeNodeCode: '',
        isTreeView: false,
        titleName: `编辑-${tabTitle}`,
        cacheName: `smartModuleAddEditViewEdit${props.flowProcessData.fdaoId}`,
      },
    });
  };
</script>
